<template>
  <div>
    <section class="hero is-primary" id="levelbar">
      <div class="hero-body">
        <div class="container">
          <div class="tile is-ancestor">
            <div class="tile">
              <div class="tile is-parent">
                <article class="tile is-child notification is-primary">
                  <h1 class="title">
                    Primary title
                  </h1>
                  <h2 class="subtitle">
                    Primary subtitle
                  </h2>
                </article>
                <article class="tile is-child notification is-primary">
                  <div class="level is-mobile">
                    <div class="level-item has-text-centered">
                      <div>
                        <p class="heading">Tweets</p>
                        <p class="title">3,456</p>
                      </div>
                    </div>
                    <div class="level-item has-text-centered">
                      <div>
                        <p class="heading">Following</p>
                        <p class="title">123</p>
                      </div>
                    </div>
                    <div class="level-item has-text-centered">
                      <div>
                        <p class="heading">Followers</p>
                        <p class="title">456K</p>
                      </div>
                    </div>
                  </div>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="tile is-ancestor">
      <div class="tile is-vertical">
        <div class="tile">
          <div class="tile is-parent is-vertical">
            <article class="tile is-child is-primary box">
              <p class="title">Vertical...</p>
              <table class="table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Instrument</th>
                    <th></th>
                    <th></th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>Name</th>
                    <th>Instrument</th>
                    <th></th>
                    <th></th>
                  </tr>
                </tfoot>
                <tbody>
                  <tr>
                    <td>Misty Abbott</td>
                    <td>Bass Guitar</td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-instagram"></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>John Smith</td>
                    <td>Rhythm Guitar</td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-instagram"></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>Robert Mikels</td>
                    <td>Lead Guitar</td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-instagram"></i>
                      </a>
                    </td>
                  </tr>
                  <tr>
                    <td>Karyn Holmberg</td>
                    <td>Drums</td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </td>
                    <td class="is-icon">
                      <a href="#">
                        <i class="fa fa-instagram"></i>
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </article>
            <article class="tile is-child box">
              <h1 class="title">Bar Styles</h1>
              <div class="block styles-box">
                <p>项目1</p>
                <progress-bar :value="15" :show-label="true" :max="100"></progress-bar>
                <p>项目2</p>
                <progress-bar :type="'primary'" :value="30" :show-label="true" :max="100"></progress-bar>
                <progress-bar :type="'info'" :value="45" :show-label="true" :max="100"></progress-bar>
                <progress-bar :type="'success'" :value="60" :show-label="true" :max="100"></progress-bar>
                <progress-bar :type="'warning'" :value="75" :show-label="true" :max="100"></progress-bar>
                <progress-bar :type="'danger'" :value="90" :show-label="true" :max="100"></progress-bar>
              </div>
            </article>
          </div>
          <div class="tile is-parent is-vertical">
            <article class="tile is-child box is-info">
              <h4 class="title">ANIMATED BARS</h4>
              <chart :type="'bar'" :data="waveData" :options="options"></chart>
            </article>
            <article class="tile is-child box">
              <p class="title">Wide tile</p>
              <p class="subtitle">Aligned with the right tile</p>
              <div class="content">
                <!-- Content -->
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tabs, TabPane } from 'vue-bulma-tabs'
import ProgressBar from 'vue-bulma-progress-bar'
import Chart from 'vue-bulma-chartjs'
export default {
  components: {
    Tabs,
    TabPane,
    Chart,
    ProgressBar
  },

  data () {
    return {
      labels: ['Sleeping', 'Designing', 'Coding', 'Cycling'],
      data: [20, 40, 5, 35],

      options: {
        segmentShowStroke: false
      },
      backgroundColor: [
        '#1fc8db',
        '#fce473',
        '#42afe3',
        '#ed6c63',
        '#97cd76'
      ],

      labels_2: ['April', 'May', 'June', 'Jule', 'August', 'September', 'October', 'November', 'December'],
      data_2: [1, 9, 3, 4, 5, 6, 7, 8, 2].map(e => (Math.sin(e) * 25) + 25),

      labels_3: ['May', 'June', 'Jule', 'August', 'September', 'October', 'November'],
      data_3: [
        [65, 59, 90, 81, 56, 55, 40],
        [28, 48, 40, 19, 88, 27, 45]
      ],
      options_3: {
        tooltips: {
          mode: 'label'
        }
      },
      backgroundColor_3: [
        'rgba(31, 200, 219, 1)',
        'rgba(151, 205, 118, 1)'
      ],
      series: ['Product A', 'Product B']
    }
  },

  computed: {
    pieData () {
      return {
        labels: this.labels,
        datasets: [{
          data: this.data,
          backgroundColor: this.backgroundColor
        }]
      }
    },

    waveData () {
      return {
        labels: this.labels_2,
        datasets: [{
          label: 'My Radar',
          data: this.data_2,
          backgroundColor: this.backgroundColor[0]
        }]
      }
    },

    seriesData () {
      let data = {
        labels: this.labels_3
      }
      data.datasets = this.series.map((e, i) => {
        return {
          data: this.data_3[i],
          label: this.series[i],
          borderColor: this.backgroundColor_3[i].replace(/1\)$/, '.5)'),
          pointBackgroundColor: this.backgroundColor_3[i],
          backgroundColor: this.backgroundColor_3[i].replace(/1\)$/, '.5)')
        }
      })
      return data
    }
  },

  created () {
    setInterval(() => {
      // https://vuejs.org/guide/list.html#Mutation-Methods
      this.data_2.unshift(this.data_2.pop())
    }, 1000)
  }

}
</script>
<style lang="scss" scoped>
#levelbar {
  margin-bottom: 1em;
}
.button {
  margin: 5px 0 0;
}
</style>
